<docs>
  ## 首页
</docs>
<template>
  <div class="body">
    <mheader type="index" title="存档信息查询" @back_btn="goBack()"></mheader>
    <!-- 申请须知 开始 -->
    <div class="list">
      <div class="title">
        <h3 class="title-h3">承诺书</h3>
      </div>
      <div class="content">
        <ul>
          <li class="c-li"><span>本人承诺所查询的信息不用于法律、行政法规规定之外的其他目的。</span></li>
          <li class="c-li"><mt-switch :value.sync="value" @change="turn">已阅读并同意</mt-switch></li>
        </ul>
      </div>
    </div>
    <!-- 申请按钮 开始 -->
    <div class="apply">
      <div class="info">
        <p class="info-cont1">姓名：{{grxx.xm}}</p>
        <p class="info-cont2">身份证号：{{grxx.sfzhm}}</p>
      </div>
      <button
        type="button"
        class="left btn btn-primary apply-btn"
        @click="reverseBtn"
        :disabled="!value"
      >查询</button>
      <!-- <div class="apply-btn" @click="reverseBtn">查询</div> -->
    </div>
  </div>
</template>
<script>
import Mheader from '@/txry/group/mheader/mheader';
import $ from '@/common/js/axios';

export default {
  components: { Mheader },
  name: 'index',
  data() {
    return {
      value: false,
      visible: false,
      grxx: {
        sfzhm: '',
        xm: '',
        lxdh: ''
      },
    };
  },
  methods: {

    turn(){
      this.value = !this.value;
    },
    goBack(){
      this.$router.go(-1);
    },
    // 基本信息查询
    GET_baseInfo(){
      this.$loading = true;
      $.get('/wszzfw/jcxxCx').then((res) => {
        this.$loading = false;
        const data = res.returnData;
        this.grxx = data;
      }).catch(() => {});
    },
    // 检查按钮是否可用
    reverseBtn() {
      this.$router.push({ name: 'searchOne' });
    }
  },
  created() {
    this.GET_baseInfo();
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/variable.scss';

  //竖屏  CSS
@media screen and (orientation: portrait) {
  .body {
    position: relative;
    height: 100vh;
    width: 100vw;
  }
}
@media screen and (orientation: landscape) {
//横CSS
}
// 申请须知
.list {
  margin-top: $margin-base;
  border: $border;
  background-color: #fff;
  .title {
    display: flex;
    padding: 28px 48px;
    border-bottom: $border;
  }
  .title-h3 {
    font-size: $font-size-large;
    color: $color-text-title;
    flex: 1 1 auto;
    line-height: 80px;
  }
  .content {
    padding: 36px 48px;
    // line-height: 64px;
    .c-li {
      line-height: 1.6;
      padding: 15px 0 15px 15px;
      font-size: 0.44444rem;
      span{
        width: 91%;
        display: inline-table;
      }
    }
  }
}
// 消息提示
.notice {
  padding: 36px 48px;
  // margin-bottom: 240px + $margin-base;
  margin-bottom: $margin-base;
  background-color: #fff;
  border: $border;
  margin-top: $margin-base;
  display: flex;
  align-items: center;
  position: relative;
  .iconfont {
    font-size: 48px * 1.5;
  }
  .icon-before {
    color: $color-base;
  }
  .icon-after {
    color: $color-text-label;
  }
  .content {
    flex: 1 1 auto;
    padding: 0 30px;
    line-height: 1.5;
  }
}
// 申请按钮
.apply {
  position: absolute;
  bottom: 0;
  display: flex;
  width: $width-100;
  margin-top: $margin-base;
  line-height: 1.5;
  .info-cont1 {
    display: flex;
    line-height: 2;
    padding-bottom: $padding-base-half;
    align-items: center;
     font-size: $font-size-base
  }
  .info-cont1-name {
    flex: 1 1 50%;
    font-size: $font-size-large;
    color: $color-text-title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info-cont1-phone {
    flex: 1 0 65%;
    text-align: right;
    font-size: $font-size-base;
  }
  .info-cont2 {
    font-size: $font-size-base;
  }
  .info {
    width: 66.666667%;
    border: $border;
    border-right: 0;
    background-color: #fff;
    padding: $padding-base/2 $padding-base/2;
  }
  .apply-btn {
    width: 33.3333333%;
    background-color: $color-base;
    text-align: center;
    color: #fff;
    height: 240px;
    font-size: $font-size-large;
    line-height: 240px;
  }
}
// messagebox
.material {
  line-height: 1.5;
  .m-title {
    color: $color-base;
    line-height: 2;
  }
  .m-content{
    color: $color-text-primary;
  }
}
</style>
